<template>
  <div>
    <div>
        <span class="content">
          <slot name="header"></slot>
      </span>
    </div>
    <div>
        <span class="content">
          <slot name="body"></slot>
      </span>
    </div>
    <div>
        <span class="content">
        <slot name="footer"></slot>
      </span>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "SlotTest"
      }
    }
  }
</script>

<style scoped>
  .content {
    height: 50px;
    font-size: 20px;
    text-align: center;
    width: 1080px;
    margin: 20px auto;
    display: table-cell;
    border: 1px red dashed;
    vertical-align: middle;
  }
</style>
